<template>
  <div class="wrapper">
    <div class="item" style="flex-basis: auto">1</div>
    <div class="item" style="flex-basis: 200px">2</div>
    <div class="item" style="flex: 0 0 200px">3</div>
    <div class="item" style="align-self: flex-end">4</div>
    <div class="item" style="flex-shrink: 0">5</div>
    <div class="item" style="flex-grow: 1">6</div>
  </div>
</template>
<script setup></script>
<style>
.item {
  /* padding: 20px; */
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  order: 10;
}
.wrapper {
  display: flex;
  height: 600px;
  flex-direction: row;
  /* flex-wrap: wrap; */
  /* flex-flow: row wrap; */
  /* justify-content: space-between; */
  align-items: flex-start;
  border: 1px solid #000;
  align-content: space-between;
}
</style>
